<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="showAddFrom">新增</el-button>
                </div>
            </template>

            <template #form>

                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="typeCode">
                        <el-select v-model="formInline.typeCode" filterable placeholder="请选择业务类型">
                            <el-option v-for="item in TypeOptions" :key="item.typeCode" :label="item.typeName"
                                :value="item.typeCode" />
                        </el-select>
                    </el-form-item>
                </SearchForm>
            </template>
            <template #table="tableScope">
              <PubilcTable :table-data="tableData" :isSlot="false" :list-config="columns" :tableHeight="tableScope.tableHeight" :page-data="pageData" @on-action="onAction" />
            </template>
        </page-view>
    </div>
</template>
<script  setup name="businessType">
import { onMounted, reactive, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import api from '@/api/index'


let router = useRouter();
const formInline = reactive({})
const pageData = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const formData = ref({})
const TypeOptions = ref([])

const tableData = ref([])

const OPERTATE = [
    { alias: 'edit', label: '编辑' },
    { alias: 'del', label: '删除' }
]

const columns = [
    { alias: 'typeName', label: '业务类型' },
    { alias: 'typeCode', label: '业务类型code' },
    { label: '操作', listArr: OPERTATE, width: '120px', fixed: 'right', type: 'action' }
]

onMounted(()=>{
    getAllType()
    onSearch()
})

const getAllType = ()=>{
    const params = {pageNum:1, pageSize:5000}
    api.reimbursement.getBizTypeList(params).then((res)=>{
            TypeOptions.value = res.list || []
    })
}

const onSearch = () => {
    const params = {...formInline,...pageData}
    api.reimbursement.getBizTypeList(params).then((res) => {
        console.log(res,'99999')
            tableData.value = res.list || []
            pageData.total = res.total || 0
    })
}
const deleteRow = (val)=>{
    ElMessageBox.confirm('确定删除此业务类型吗？删除后将不可恢复。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const id = val.id
        api.reimbursement.deleteBizType(id).then((res)=>{
            ElMessage({
                type: 'success',
                message: '删除成功!'
            });
            onSearch()
        })
    })

}
const editRow = (row) => {
    api.reimbursement.getBizTypeByteId(row.id).then((res)=>{
        localStorage.setItem('typeDetailParams', JSON.stringify(res));
        console.log(res, router)
        router.push({
            name: 'editBusinessType',
            query:{
                type: 'edit'
            }
        })
    })
}
const onAction = ([item, row]) => {
    const obj = {
        'del': deleteRow,
        'edit': editRow,
        'pageNum': onSearch,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData[item] = row
        if (item === 'pageSize') pageData.pageNum = 1
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}

const showAddFrom = () => {
    router.push({
        name: 'addBusinessType',
        query:{
            type: 'add'
        }
    })
}
</script>

<style lang="scss" scoped>
.clearfix {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    margin-bottom: 10px;
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    .role-span{
        font-weight: 700;
        color: #303133;
        font-size: 15px;
    }
}
.fixButtom{
    float: right;
}
</style>
